<template>
  <div class="notice_manage">
    <el-row class="table_search">
      <el-col :span="24">
        <template>
          <el-select v-model="value" placeholder="全部状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </template>
      </el-col>
    </el-row>

    <el-row class="table_btn">
      <el-col :span="24" class="text-r">
        <el-button type="danger" icon="el-icon-plus" @click="goPage('/notice/add_notice')">新增通知</el-button>
      </el-col>
    </el-row>

    <template>
      <el-table
        size="mini"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        @row-click='handleRowHandle'>
        <el-table-column
          align="center"
          prop="notice_num"
          label="通知编号"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="notice_type"
          label="通知类型"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          prop="notice_status"
          label="通知状态">
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          prop="start_time"
          label="创建时间">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text"  size="mini" @click="retract(scope.$index, scope.row)"
                       :class="{'cla_5a5e66':scope.row.notice_status=='撤回','cla_409EFF':scope.row.notice_status=='正常'}">
              撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block footerBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </template>

  </div>
</template>

<script>

  export default {
    data: function (){
      return {
        options: [
            {
              value: '全部状态',
              label: '全部状态'
            }
            ,
            {
              value: '正常',
              label: '正常'
            },
            {
              value: '撤回',
              label: '撤回'
            }
          ],
        value: '',
        input10: '',
        tableData: [
          {
            notice_num:11,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费fsdf fsd f fs 水淀粉啊爽啊爽放水淀粉阿斯顿发阿斯顿发阿斯顿发阿斯顿发阿斯顿发阿斯顿发阿斯顿发水淀粉阿斯顿萨的发萨的发萨的发送 萨法法首发式发收费暗示法暗示法萨发收费阿斯顿发 发收费的啊发送水淀粉萨地方啊',
            start_time: '2017-11-30 11:55:53'
          },
          {
            notice_num:12,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:22,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '撤回',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '撤回',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:2,
            notice_type: '系统通知',
            notice_status: '正常',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
          {
            notice_num:888888,
            notice_type: '系统通知',
            notice_status: '撤回',
            notice_content: '涅米啊 啊 啊啊阿凡达发收费',
            start_time: '2017-10-30 11:55:53'
          },
        ],
        currentPage: 1,
        pageSize:10
      }
    },
    methods: {
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      searchFun(){
        //请求接口返回数据
      },

      retract(index, row) {
        if(row.notice_status == '正常'){
          var that = this;
          this.$confirm('此操作将永久删除该通知，是否继续','提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            row.notice_status = '撤回';
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(function () {
            that.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
        }

      },
      goPage : function (url) {
        this.$router.push({path : url});
      },

      handleRowHandle(row){
        console.log(row)
      }
    }
  }
</script>

<style scoped>
  .table_search, .table_btn{
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .el-input{
    width: auto;
  }
  .text-r{
    text-align: right;
  }
  .footerBox {
    width: 100%;
    height: 50px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
    text-align: right;
  }



  .cla_409EFF{
      color: #409EFF;
      }
  .cla_5a5e66{
    color: #5a5e66;
      }
</style>
